import React, { Component } from 'react'
import './index.scss'
import Code from './code/code'
import '../../components/text/index.css'
import Text from '../../components/text/index'
import axios from '../../components/axios'
import pubsub from 'pubsub-js'

export default class index extends Component {
    state={
        text:'',
        html:'',
        data:[],
        num:0
    }
    componentDidMount(){
        pubsub.publish("component","留言")
        Code()//验证码
        axios("message",{"where":""}
        ).then(result=>{
            this.setState({'data':result.data,'num':result.data.length});
        }).catch(err=>{
            console.log(err);
        })
    }
    imgToggle=(e)=>{
        e.target.nextElementSibling.classList.toggle("none")
        e.target.nextElementSibling.nextElementSibling.classList.toggle("none")
        e.target.innerHTML=e.target.innerHTML=="好活当赏"?"下次一定":"好活当赏"
    }
    getText=(data)=>{
        this.setState({text:data})
    }
    getHTML=(data)=>{
        this.setState({html:data})
    }
    setText=()=>{//发送留言至数据库
        var emailTest = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        console.log(emailTest.test(this.refs.email.value));
        if (emailTest.test(this.refs.email.value)) {
            if(this.refs.name.value!=""&&this.refs.name.value.length>0){
                if (this.state.text.length>0) {
                    axios("getMessage",{"data":`'${this.refs.email.value}','${this.state.html}','${this.state.text}','${this.refs.name.value}','${new Date(). toLocaleString('chinese', { hour12: false })}'`}
                    ).then(result=>{
                        this.setState({data:result.data});
                        this.refs.email.value=""
                        this.refs.name.value=""
                        this.refs.code.value=""
                        this.refs.canvasCode.click()
                        document.getElementsByClassName("w-e-text")[0].innerHTML=""
                    }).catch(err=>{
                        console.log(err);
                    })
                }else{
                    alert("留言不能为空")
                }
            }else{
                alert("昵称不能为空")
            }
        }else {
            alert("请输入正确的邮箱")
        }
    }
    render() {
        return (
            <div>
            <div className="message-inner">
                <h2>留言区</h2>
                <div className="new-message">
                    <label>
                        <p>邮箱</p> : <input type="email" id="email" placeholder="不妨留个邮箱(保密，必填)" ref='email' pattern="" title="请正确输入邮箱" />
                    </label>
                    <br />
                    <label>
                        <p>称呼</p> : <input type="text" maxLength={10} id="text" ref='name' placeholder="称呼(必填)" />
                    </label>
                    <br />
                    <label>
                        <p>验证码</p> : <input type="text" name="verification" ref="code" id="verification" placeholder="验证码" />
                        <canvas id="code" ref="canvasCode" />
                    </label>
                    <p className="code-err">验证码不正确</p>
                    <br />
                    <Text getHTML={this.getHTML} getText={this.getText}></Text>
                    <button id="exceptional" onClick={this.imgToggle} >好活当赏</button>
                    <img className="none" src="./zhifubao.jpg" width="150"/>
                    <img className="none" src="./weixin.png" width="150"/>
                    <button id="cancel">取消留言</button>
                    <button id="submit_massage" onClick={this.setText}>留 言</button>
                </div>
                <h2 className="message-h2">留言<span>{this.state.num}</span></h2>
                <hr />
                {
                    this.state.data.map((item,index)=>{
                        function createMarkup() {
                            return { __html: item.text }
                        }
                        function MyComponent() {
                            return <p className="essay" dangerouslySetInnerHTML={createMarkup()}></p>
                        }
                        return (
                            <div className="message" key={index}>
                                <p className="name">{item.name}</p>
                                <p className="time">{item.time}</p>
                                {MyComponent()}
                            </div>
                        )
                    })
                }
            </div>
            </div>

        )
    }
}
